<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>东子自用粘贴板</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    <style>
        span{
            float: right ;
        }

    </style>
</head>
  <body>
      <br>
      <br>
      <br>
      <br>
      <br>

  <center id ="app">
      <div class="container">
              <form action="/content/add" method="post" >
                  <input type="hidden" name="id">
                  <div class="input-group input-group-lg">
                      <input style="width: 350px;" type="text" v-model="thecontent.content"  name ="content" class="form-control" placeholder="输入粘贴内容" >
                  </div>

                  <br>
                  <br>

                  <div class=" btn-group btn-group-lg">
                      <button type="submit" class="btn btn-success">上传</button>
                  </div>

                  <div class=" btn-group btn-group-lg">
                      <button type="button" @click="search" class="btn btn-success">搜索</button>
                  </div>
              </form>
      </div>
    <br>
    <br>
    <!-- 显示区域 -->
    <div class="container">
        <div v-for="item in datalist" class="alert alert-success">{{item.content}}<span @click="del(item.id)" class="glyphicon glyphicon-remove" aria-hidden="true"></span></div>
    </div>


      <div id = "backup">
          <a style="color:black" href="https://beian.miit.gov.cn/" target="_blank">蜀ICP备2021029354号</a>
      </div>

      </center>

      <!--vue的库的引入-->
      <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
      <!--axios的引入-->
      <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
      <!-- script -->
      <script>
          var msgdiv = document.querySelector('.alert');
          var cancel = document.querySelector('.glyphicon');
          cancel.onclick=function(){
              // msgdiv.style.display="none";
              alert("点击删除");
          }
      </script>
      <script>
          var vue = new Vue({
              el: '#app',
              data: {
                  datalist: [],
                  thecontent: {
                      id: 0,
                      content: ''
                  }
              },
              created() {
                  this.getAll();
              },
              methods: {
                  //列表
                  getAll() {
                      axios.get("/content").then((resp) => {
                          console.log(resp);
                          this.datalist = resp.data.data;
                      });
                  },
                  del(contentid){
                      // console.log("删除消息"+contentid);
                      axios.delete("/content/"+contentid).then(res=>{
                          if(res.data.code == 0){
                              // this.$message.success("删除成功");//不加elementui了
                          }
                          this.getAll();
                      })

                      //不能用
                      // var cancel = document.querySelector('.glyphicon');
                      // var msgdiv = document.querySelector('.alert');
                      // msgdiv.style.display="none";
                  },
                  //搜索功能
                  search(){
                      if(this.thecontent.content != null){

                          axios.get("/content/search?keyword="+this.thecontent.content).then(res=>{
                              // console.log(res);
                              this.datalist = res.data.data;
                          })
                      }
                  }
              }

          })
      </script>
    <script src="https://fastly.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
  </body>
</html>